<template>
  <div class="ComprehensiveInfo">
    <!--<div class="homeNav">-->
      <!--<navbar></navbar>-->
    <!--</div>-->
    <div class="ComprehensiveContent">
      <div class="Cheader">
        <span class="title">&nbsp;控制台</span>
        <span class="title"><router-link to="/homeoverview">&nbsp;临时跳转到首页</router-link></span>
      </div>
      <div class="headerList">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div class="leftTop">
                <div class="leftinfo">综合信息</div>
                <div class="leftMore"><router-link to="/ComprehensiveMore">更多></router-link></div>
              </div>
              <div class="leftContent">
                <p class="leftNumber">{{this.total_time}}</p>
                <p class="leftbtn">总运行时长(h)</p>
                <div class="leftlist">
                  <el-row :gutter="20">
                    <el-col :span="8"><div class=" bg-purple">
                      <div class="TotalLifting">
                        <p class="totalNum">{{this.total_output}}</p>
                        <p class="totalBtn">总产量(吨)</p>
                      </div>
                    </div>
                    </el-col>
                    <el-col :span="8"><div class=" bg-purple">
                      <div class="TotalLifting">
                        <p class="totalNum">{{this.total_lift}}</p>
                        <p class="totalBtn">总起重(吨)</p>
                      </div>
                    </div></el-col>
                    <el-col :span="8"><div class=" bg-purple">
                      <div class="TotalLifting">
                        <p class="totalNum">{{this.total_power}}</p>
                        <p class="totalBtn">总耗电量(kWh)</p>
                      </div>
                    </div></el-col>
                  </el-row>




                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div class="middleTop">
                <div class="middleinfo">每日摘要</div>
                <div class="middleMore"><router-link to="/controlStation">更多></router-link></div>
              </div>
              <div class="middleContent">
                <el-row :gutter="20">
                  <el-col :span="8"><div class=" bg-purple">
                    <div class="middleList">
                      <p class="iconOne">
                        <img :src="shichang"/>
                      </p>
                      <p class="middleListNumber">
                        {{this.day_total_time}}
                      </p>
                      <p class="middleListBtn">
                        运行时长(h)
                      </p>
                    </div>
                  </div></el-col>
                  <el-col :span="8"><div class=" bg-purple">
                    <div class="middleList">
                      <p class="iconOne">
                        <img :src="qizhongliang"/>
                      </p>
                      <p class="middleListNumber" style="color: #25B7C8">
                        {{this.day_total_lift}}
                      </p>
                      <p class="middleListBtn">
                        起重量(吨)
                      </p>
                    </div>
                  </div></el-col>
                  <el-col :span="8"><div class=" bg-purple">
                    <div class="middleList">
                      <p class="iconOne">
                        <img :src="jinggao"/>
                      </p>
                      <p class="middleListNumber" style="color: #E53D41">
                        {{this.day_alarm}}
                      </p>
                      <p class="middleListBtn" >
                        今日告警(次)
                      </p>
                    </div>
                  </div></el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div class=" bg-purple ">
              <div class="rightTop">
                <div class="rightinfo">{{this.topTime}}</div>
                <div class="rightMore">{{this.today}}</div>
              </div>
              <div class="rightMiddle">
                <div class="rightMiddleTop">
                  <div class="rightMiddleTitle">
                        信息台
                  </div>
                  <div class="rightMiddleMore">
                    <router-link to="/message/event" v-if="activeName === 'first'">  更多> </router-link>
                    <router-link to="/message/warning"  v-if="activeName === 'second'">  更多> </router-link>
                  </div>
                </div>
                <div class="rightMiddleContent">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label= "this.realtimeDatanum + '(' + this.tableData.length + ')'" name="first">
                      <el-table
                        :data="tableData"
                        border
                        stripe border fit highlight-current-row
                        style="width: 100%;height:155px; "
                        :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"

                      >
                        <el-table-column
                          v-for="(column, index) in realtimecols"
                          :prop="column.prop"
                          :label="column.label"
                          :key="index"
                          :width="column.width"
                          :sortable="column.sortable"
                        >
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane :label= "this.EarlywarningDatanum + '(' + this.EarlywarningData.length + ')'" name="second">
                      <el-table
                        :data="EarlywarningData"
                        border
                        stripe border fit highlight-current-row
                        style="width: 100%;height:155px; "
                        :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"
                      >
                        <el-table-column
                          v-for="(column, index) in cols"
                          :prop="column.prop"
                          :label="column.label"
                          :key="index"
                          :width="column.width"
                          :sortable="column.sortable"
                        >
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="centerList">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="grid-content bg-purple">
             <div class="leftTable">
               <div class="leftTop">
                 <div class="leftinfo">到期提醒</div>
                 <!--<div class="leftMore">更多></div>-->
               </div>
               <div class="leftCenterContent">
                 <el-tabs v-model="activeNameBottom" @tab-click="handleClick">
                   <el-tab-pane :label="this.submitFittingsnum + '(' + this.FittingsData.length + ')'" name="third">
                     <el-table
                       :data="FittingsData"
                       border
                       stripe border fit highlight-current-row
                       style="width: 100%;height:400px; "
                       :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"
                     >
                       <el-table-column
                         v-for="(column, index) in bottomcols1"
                         :prop="column.prop"
                         :label="column.label"
                         :key="index"
                         :width="column.width"
                         :sortable="column.sortable"
                       >
                       </el-table-column>
                     </el-table>
                   </el-tab-pane>
                   <el-tab-pane :label="this.Equipmanagenum + '(' + this.EquipmanageData.length + ')'" name="fouth">
                     <el-table
                       :data="EquipmanageData"
                       border
                       stripe border fit highlight-current-row
                       style="width: 100%;height:400px; "
                       :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"
                     >
                       <el-table-column
                         v-for="(column, index) in bottomcols2"
                         :prop="column.prop"
                         :label="column.label"
                         :key="index"
                         :width="column.width"
                         :sortable="column.sortable"
                       >
                       </el-table-column>
                     </el-table>
                   </el-tab-pane>
                 </el-tabs>
               </div>
             </div>
            </div>
          </el-col>
          <el-col :span="17">
            <div class=" bg-purple ">
             <div class="rightMap">
                <div class="rightMapTitle" @mouseover="showList">
                  <el-row>
                    <el-col :span="12">
                      <div class="grid-content bg-purple">
                        <span style=" float:left;width: 20px;height: 20px; background-color: #25B6C7; margin-left: 20px;margin-top: 14px"></span>
                        <span style="padding-left: 5px; float: left"> 总数 {{this.total_equip}}</span>
                        <span style="float:left;width: 20px;height: 20px; background-color: #3FB05A; margin-left: 20px;margin-top: 14px"></span>
                        <span style="padding-left: 5px; float: left">已启动 {{this.on_line}}</span>
                        <span style="float:left;width: 20px;height: 20px; background-color: #999999; margin-left: 20px;margin-top: 14px"></span>
                        <span style="padding-left: 5px">未启动 {{this.off_line}}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="grid-content bg-purple-light" style="float: right; margin-right: 20px">
                          <router-link to="/monitor/iots">
                          <span title="设备列表" style=" cursor: pointer" >
                                <img :src="listsEquip" style="vertical-align: middle"/>
                             </span>
                          </router-link>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                  <div class="rightMapTitle1" style="padding-left: 10px" v-show="this.showTitle">
                    <el-form :inline="true"  class="demo-form-inline searchForm" :model="submiteMap" >
                      <!--{{addMirror.city}}-->
                      <el-form-item  class="handItem" label="">
                        <div id="app">
                          <el-cascader
                            clearable
                            class="cityMessage"
                            size="large"
                            :options="citys"
                            v-model="addMirror.city"
                            @change="handleChange"
                            placeholder="省/市/区">
                          </el-cascader>
                        </div>
                      </el-form-item>
                      <el-form-item class="handItem" label="">
                        <el-select v-model="submiteMap.condition.equip_type" clearable placeholder="设备类型" style="width: 130px">
                          <el-option
                            v-for="item in EquipmanageStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="handItem" label="">
                        <el-select v-model="submiteMap.condition.status" clearable placeholder="状态" style="width: 130px">
                          <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="handItem" label="">
                        <el-select v-model="submiteMap.condition.mainten_expire" clearable placeholder="维保到期" style="width: 130px">
                          <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="handItem" label="">
                        <el-select v-model="submiteMap.condition.verifi_expire" clearable placeholder="年审到期" style="width: 130px">
                          <el-option
                            v-for="item in options3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item class="handItem" >
                        <el-input class="handInput" v-model="submiteMap.condition.name" placeholder="客户名称/设备名称/出厂编号" style="width: 220px" ></el-input>
                      </el-form-item>
                      <el-form-item class="handItem" >
                        <el-button type="primary" @click="seachMap">查询</el-button>
                        <el-button type="primary" @click="clearBtn" style="background-color: #333B3D; border-color: #333B3D">重置</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div class="bMap">
                 <div class="showStatus">
                   <div class="hoverImg" @click="this.showContent">
                     <img :src="xiangyoushouqiHover"  v-if="this.btnStatus === true"/>
                   </div>
                   <div @click="this.showContent" style="margin-left: 320px; position: absolute;z-index: 10;margin-top: 160px;cursor: pointer" v-if="this.btnStatus === false">
                     <img :src="xiangzuo" v-if="this.btnStatus === false"/>
                   </div>
                   <div class="mapRightList" v-show="this.btnStatus">
                     <div class="YuserName">
                       <p class="name">{{codeName}}</p>
                       <p class="name1">共<span style="color: #25B6C7">{{this.equipCount}}</span>台设备</p>
                     </div>
                     <div class="YuserList" v-for="(listData,index) in this.grablistEquip1" :key="index">
                       <p >
                         <span><img :src="unRun" v-if="listData.status ==='0'"/></span>
                         <span><img :src="onRun" v-if="listData.status ==='1'" /></span>
                         <span  style="margin-left: 10px">{{listData.pid}}</span>
                         <span style="color:#E6E6E6; margin-left: 10px ">|</span>
                         <span style="margin-left: 10px">{{listData.equip_cid}}</span>
                       </p>
                       <p class="listColor">
                         <span
                           @click="goGrab(listData)">实时监测</span>
                         <span >|</span>
                         <span>统计数据</span>
                         <span >|</span>
                         <span @click="goContrast(listData)"
                         >设备对比</span>
                       </p>
                     </div>
                   </div>
                 </div>
                 <div id="assetMap" :style="{height:'23.4vw',width:'100%', color:'#fff'}"></div>
               </div>
             </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import { Navbar, Sidebar, AppMain } from '../layout/components'
  import BaiduMap from '@/api/map.js'
  import { regionData } from 'element-china-area-data'
  import shichang from '@/assets/controlStation/shichang.png'
  import qizhongliang from '@/assets/controlStation/qizhongliang.png'
  import jinggao from '@/assets/controlStation/jinggao.png'
  import listsEquip from '@/assets/controlStation/list.jpg'
  import onRun from '@/assets/controlStation/onRun.png'
  import unRun from '@/assets/controlStation/unRun.png'
  import xiangyoushouqiHover from '@/assets/controlStation/xiangyoushouqiHover.png'
  import xiangzuo from '@/assets/controlStation/xiangzuo.png'
  import gaojin from '@/assets/mapStatus/gaojin.png'
  import jinjigaojin from '@/assets/mapStatus/jinjigaojin.png'
  import lixian from '@/assets/mapStatus/lixian.png'
  import yanzhongjingaoicon from '@/assets/mapStatus/yanzhongjinggaoicon.png'
  import zhengcang from '@/assets/mapStatus/zhengcang.png'
  export default {
    name: 'ComprehensiveInfo',
    components: {
      Navbar,
      Sidebar,
      AppMain
    },
    data() {
      return {
        QZnumber: '',
        plcNumber: '',
        mapDD: {},
        unRun,
        onRun,
        listsEquip,
        xiangzuo,
        xiangyoushouqiHover,
        shichang,
        qizhongliang,
        jinggao,
        gaojin,
        jinjigaojin,
        lixian,
        yanzhongjingaoicon,
        zhengcang,
        tableData: [],
        mapCountList: [], // 存储地图数据为空时
        mapCount: 0,
        areaCity: [],
        Pid: '',
        total_equip: '',
        on_line: '',
        off_line: '',
        total_time: '',
        total_output: '',
        total_lift: '',
        day_total_lift: '',
        day_alarm: '',
        day_total_time: '',
        total_power: '',
        citys: regionData,
        activeName: 'first',
        activeNameBottom: 'third',
        btnStatus: false,
        topTime: '',
        today: '',
        showTitle: false,
        statusOptions: [{
          value: '1',
          label: '开机'
        },
        { value: '0',
          label: '关机'
        }
        ],
        options: [{
          value: '',
          label: '设备类型'
        }, {
          value: '0',
          label: '起重机'
        }, {
          value: '1',
          label: '抓斗'
        }],
        options2: [{
          value: '1',
          label: '1月内维保到期'
        }, {
          value: '2',
          label: '2月内维保到期'
        }, {
          value: '3',
          label: '3月内维保到期'
        }],
        options3: [{
          value: '1',
          label: '1月内年审到期'
        }, {
          value: '2',
          label: '2月内年审到期'
        }, {
          value: '3',
          label: '3月内年审到期'
        }],
        value: '',
        // 预警信息
        cols: [
          { prop: 'equip_cid', label: '出厂编号', width: '150px', sortable: true },
          { prop: 'oid_name', label: '测点', width: '80px', sortable: true },
          { prop: 'num', label: '统计次数', width: '200px', sortable: true },
          { prop: 'creator_time', label: '最新时间' }
        ],
        // 实时信息
        realtimecols: [
          { prop: 'station', label: '出厂编号', width: '150px', sortable: true },
          { prop: 'event_level', label: '级别', width: '80px', sortable: true },
          { prop: 'content', label: '事件描述', width: '300px', sortable: true },
          { prop: 'time_alarm', label: '发生时间' }
        ],
        // 零配件
        FittingsData: [],
        bottomcols1: [
          { prop: 'equip_cid', label: '出厂编号', width: '120px', sortable: true },
          { prop: 'equip_name', label: '设备名称', width: '120px', sortable: true },
          { prop: 'fittings_type', label: '机构', width: '80px', sortable: true },
          { prop: 'name', label: '零配件名称' }
        ],
        // 年审到期
        bottomcols2: [
          { prop: 'equip_cid', label: '出厂编号', width: '150px', sortable: true },
          { prop: 'name_label', label: '设备名称', width: '120px', sortable: true },
          { prop: 'next_annual_trial', label: '年审到期时间', sortable: true }
        ],
        // 实时信息
        realtimeDatanum: '实时信息',
        EarlywarningDatanum: '预警信息',
        submitFittingsnum: '零配件到期',
        Equipmanagenum: '年审到期',
        realtimeData: [
        ],
        tableDatas: [
        ],
        bottomtableDatas: [
        ],
        bottomtableDatas2: [
        ],
        /**
         *  以下为接口
         * */
        // 获取所有数据
        AllData: [],
        earlywarning: [{
          equip_cid: '设备编号',
          equip_name: '设备名称',
          project_id: '项目编号',
          fittings_type: '机构',
          name: '零配件名称',
          remind_type: '提醒类型',
          remind_content: '提醒内容',
          remind_time: '提醒时间'
        }],
        // 所有数据
        submitAll: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_equip_run_statis',
          datas: []
        },
        // 预警信息
        EarlywarningData: [],
        submitEarlywarning: {
          access_token: localStorage.getItem('access_token'),
          type: 'earlywarning_get_condition',
          data: {
            condition: {
              equip_cid: '',
              equip_name: '',
              oid: '',
              fittings_name: '',
              fittings_remind: 1
            },
            page: {
              page_size: '1000',
              page_number: '1'
            }
          }
        },
        // 实时信息
        submitRealtime: {
          access_token: localStorage.getItem('access_token'),
          type: 'event_get_condition',
          data: {
            condition: {
              pids: [],
              event_levels: []
            },
            page: {
              page_size: '1000',
              page_number: '1'
            }
          }
        },
        // 零配件
        submitFittings: {
          access_token: localStorage.getItem('access_token'),
          type: 'fittings_get_condition',
          data: {
            condition: {
              equip_cid: '',
              equip_name: '',
              oid: '',
              fittings_name: '',
              fittings_remind: 1
            },
            page: {
              page_size: '1000',
              page_number: '1'
            }
          }
        },
        // 年审到期
        EquipmanageData: [],
        submitequipmanage: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_condition',
          data: {
            condition: {
              cid: '',
              cids: [],
              cid_filter: [],
              name: '',
              brand: '',
              equip_class: '',
              annual_trial_remind: 1,
              type: ''
            },
            page: {
              page_size: '1000',
              page_number: '1'
            }
          }
        },
        // 所有设备
        AllEquipmanageData: [],
        submiteAllquipmanage: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_deploy_all_equip',
          city_code: ''
        },
        // 设备类型
        EquipmanageStatus: [],
        submiteEquipmanageStatus: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_type'
        },
        // 获取地图信息
        mapLists: [],
        addMirror: {
          area: '',
          equip_type: '',
          status: '',
          name: '',
          mainten_expire: '',
          verifi_expire: ''
        },
        city1: [],
        submiteMap: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_query_deploy_local',
          condition: {
            area: '',
            equip_type: '',
            status: '',
            name: '',
            mainten_expire: '',
            verifi_expire: ''
          }
        },
        pidnumber: '',
        compNumber: '',
        cityCode: '',
        equipCount: '',
        grablistEquip1: [],
        codeName: '全部',
        map: '',
        list: [],
        ifMapData: []
      }
    },
    mounted() {
      this.engineData()
      this.queryEarlywarning()
      this.queryRealtime()
      this.queryFittings()
      this.queryEquipmanage()
      this.drawLine()
      this.queryMapList()
      this.queryAllEquipList()
      this.queryEquipSta()
      this.wsAlarm()
    },
    methods: {
      // 显示地图搜索栏
      showList() {
        this.showTitle = !this.showTitle
      },
      // 实时请求
      wsAlarm() {
        // var arr = []
        var firstArry = []
        let web = process.env.SERVER_URL_WS_SERVICE
        var ws = new WebSocket(web + '/ws')
        ws.onopen = function() {
          console.log('连接成功')
          var datajson = JSON.stringify({
            access_token: '',
            type: 'ws_first_rids',
            rids: [localStorage.getItem('num')]
          })
          ws.send(datajson)
        }
        ws.onmessage = (e) => {
          var data = JSON.parse(e.data)
          if (data.errcode === '00001') {
            for (var i = 0; i < data.datas.length; i++) {
              firstArry.push(data.datas[i])
            }
          } else if (data.datas !== []) {
            var xArry = {}
            xArry = data.datas[0]
            if (xArry !== undefined) {
              for (let j = 0; j < firstArry.length; j++) {
                var theID = firstArry[j].id
                if (xArry.id === firstArry[j].id) {
                  firstArry[j] = xArry
                }
              }
              if (xArry.id !== theID) {
                firstArry.push(xArry)
              }
            }
          }
          firstArry = firstArry.filter((v) => {
            return v.event_level !== '0'
          })
          this.tableData = [...firstArry]
          if (this.$route.path !== '/message/event') {
            // alert('关闭成功')
            ws.close()
          }
        }
        ws.onclose = (e) => {
          console.log(e)
        }
        //        ws.onclose = function(e) { // e为关闭的原因
        //          console.log(this.$route.params)
        //          console.log(e)
        //          if (this.$route.path !== '/message/event') {
        //            alert('关闭成功')
        //            ws.onclose
        //          }
        //        }
      },
      initMap() {
        BaiduMap.init()
          .then((BMap) => {
            this.mapDD = BMap
            this.map = new BMap.Map('assetMap', { enableMapClick: true })
            this.map.centerAndZoom(new BMap.Point(114.236458, 22.691286), 6)
            this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
            // 自定义覆盖物
            this.creatMp(BMap)
          })
      },
      creatMp(BMap) {
        let self = this
        for (let i = 0; i < this.mapLists.length; i++) {
          var p0 = this.mapLists[i].longitude
          var p1 = this.mapLists[i].latitude
          var marker = new BMap.Marker(new BMap.Point(p0, p1)) // 创建标注
          var opts = {
            position: marker, // 指定文本标注所在的地理位置
            offset: new BMap.Size(-30, 0) // 设置文本偏移量
          }
          var content = '<div class="exam_bus_sel_details" style="font-size: 12px; line-height: 25px;"><div>' +
            '<div class="exam_bus_sel_details_bus">' + this.mapLists[i].local + '<span>  |  </span>' + this.mapLists[i].count + '</div>' +
            '</div></div></div>'
          this.map.addOverlay(marker)
          var label = new BMap.Label(content, opts) // 创建文本标注对象
          label.setStyle({
            color: '#fff',
            fontSize: '12px',
            height: '30px',
            lineHeight: '30px',
            fontFamily: '微软雅黑',
            backgroundColor: '#3FB05A',
            borderColor: '#fff',
            borderRadius: '4px',
            paddingLeft: '10px',
            paddingRight: '10px',
            cursor: 'pointer'
          })
          marker.setLabel(label)
          var code = this.mapLists[i].city_code
          var name = this.mapLists[i].local
          addClickHandler(content, label, code, name)
        }

        function addClickHandler(content, label, code, name) {
          label.addEventListener('onmouseover', function(e) {
            label.setStyle({
              color: '#fff',
              fontSize: '12px',
              height: '30px',
              lineHeight: '30px',
              fontFamily: '微软雅黑',
              backgroundColor: '#25B7C8',
              borderColor: '#fff',
              borderRadius: '4px',
              paddingLeft: '10px',
              paddingRight: '10px'
            })
          })
          label.addEventListener('onmouseout', function(e) {
            label.setStyle({
              color: '#fff',
              fontSize: '12px',
              height: '30px',
              lineHeight: '30px',
              fontFamily: '微软雅黑',
              backgroundColor: '#3FB05A',
              borderColor: '#fff',
              borderRadius: '4px',
              paddingLeft: '10px',
              paddingRight: '10px',
              cursor: 'pointer'
            })
          })
          label.addEventListener('click', function(e) {
            self.cityCode = code
            self.codeName = name
            self.submiteAllquipmanage.city_code = this.cityCode
            self.queryAllEquipList()
            self.btnStatus = true
          })
        }
      },
      handleChange() {
        var shen = ''
        var shi = ''
        var qu = ''
        for (var i = 0; i < this.citys.length; i++) {
          if (this.citys[i].value === this.addMirror.city[0]) {
            shen = this.citys[i].label
            for (var o = 0; o < this.citys[i].children.length; o++) {
              if (this.citys[i].children[o].value === this.addMirror.city[1]) {
                shi = this.citys[i].children[o].label
                for (var p = 0; p < this.citys[i].children[o].children.length; p++) {
                  if (this.citys[i].children[o].children[p].value === this.addMirror.city[2]) {
                    qu = this.citys[i].children[o].children[p].label
                  }
                }
              }
            }
          }
        }
        this.city1 = this.addMirror.city[2]
        this.submiteMap.condition.area = shen + shi + qu
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      drawLine() {
        var weekShow = ''
        if (new Date().getDay() === 1) {
          weekShow = '一'
        } else if (new Date().getDay() === 2) {
          weekShow = '二'
        } else if (new Date().getDay() === 3) {
          weekShow = '三'
        } else if (new Date().getDay() === 4) {
          weekShow = '四'
        } else if (new Date().getDay() === 5) {
          weekShow = '五'
        } else if (new Date().getDay() === 6) {
          weekShow = '六'
        } else if (new Date().getDay() === 7) {
          weekShow = '七'
        }
        this.topTime = (new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate() + ' ')
        this.today = '星期' + weekShow
      },
      // 获取总览数据
      engineData() {
        console.log('axios:', axios.post)
        axios.post('/console', this.submitAll, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.AllData = res.data.datas
          this.total_time = this.AllData[0].value
          this.total_output = this.AllData[1].value
          this.total_lift = this.AllData[2].value
          this.total_power = this.AllData[3].value
          this.day_total_time = this.AllData[4].value
          this.day_total_lift = this.AllData[5].value
          this.day_alarm = this.AllData[6].value
          this.total_equip = this.AllData[8].value
          this.on_line = this.AllData[9].value
          this.off_line = this.AllData[10].value
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取预警信息
      queryEarlywarning() {
        axios.post('/earlywarning', this.submitEarlywarning, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.EarlywarningData = res.data.data.items
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取实时信息
      queryRealtime() {
        axios.post('/event', this.submitRealtime, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.realtimeData = res.data.data.items
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 零配件
      queryFittings() {
        axios.post('/fittings', this.submitFittings, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.FittingsData = res.data.data.items
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 零配件
      queryEquipmanage() {
        axios.post('/equipmanage', this.submitequipmanage, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.EquipmanageData = res.data.data.items
          // console.log(this.realtimeData)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 设备类型
      queryEquipSta() {
        axios.post('/basicdata', this.submiteEquipmanageStatus, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.EquipmanageStatus = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 地图层上方设备列表
      queryAllEquipList() {
        this.submiteAllquipmanage.city_code = this.cityCode
        axios.post('/console', this.submiteAllquipmanage, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.grablistEquip1 = res.data.datas
          console.log(this.grablistEquip1)
          this.equipCount = this.grablistEquip1.length
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取地图坐标信息
      queryMapList() {
        axios.post('/console', this.submiteMap, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.mapLists = res.data.datas
          this.initMap()
        })
          .catch((error) => {
            console.log(error)
          })
      },
      seachMap() {
        if (!this.city1) {
          this.submiteMap.condition.area = ''
        } else {
          this.submiteMap.condition.area = (this.city1).toString()
        }
        axios.post('/console', this.submiteMap, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.mapLists = res.data.datas
          this.initMap()
          if (this.mapLists.length === 0) {
            this.grablistEquip1 = this.mapCountList
            this.equipCount = this.mapCount
          } else {
            this.queryAllEquipList()
          }
        })
          .catch((error) => {
            console.log(error)
          })
        // this.submiteAllquipmanage.city_code = this.submiteMap.condition.area
        // this.queryAllEquipList()
      },
      clearBtn() {
        this.addMirror.city = []
        if (!this.city1) {
          this.submiteMap.condition.area = ''
        } else {
          this.city1 = ''
          this.submiteMap.condition.area = (this.city1).toString()
        }
        this.submiteMap.condition.equip_type = ''
        this.submiteMap.condition.status = ''
        this.submiteMap.condition.name = ''
        this.submiteMap.condition.mainten_expire = ''
        this.submiteMap.condition.verifi_expire = ''
      },
      // 收起按钮
      showContent() {
        this.btnStatus = !this.btnStatus
      },
      // 跳转到实时监测
      goGrab(val) {
        for (var j = 0; j < val.cids.length; j++) {
          if (val.cids[j].indexOf('plc') !== -1) {
            this.plcNumber = val.cids[j]
          } else if (val.cids[j].indexOf('comp') !== -1) {
            this.compNumber = val.cids[j]
          }
        }
        window.localStorage.setItem('num', val.pid) // 站点编号
        window.localStorage.setItem('Cid', val.crane_id) // 设备编号
        window.localStorage.setItem('name', val.name_label) // 设备名称
        window.localStorage.setItem('plc', this.plcNumber) // 网关
        window.localStorage.setItem('proname', val.project_name) // 项目名称
        window.localStorage.setItem('status', val.status) // 设备状态
        window.localStorage.setItem('type', val.type) // 设备类型
        window.localStorage.setItem('stationName', val.station_name) // 站点名称
        window.localStorage.setItem('compNumber', this.compNumber) // 通电时间
        this.$router.push({
          path: '/monitor/homepage/grab',
          query: {
            pid: val.pid
          }
        })
      },
      // 跳转到设备对比
      goContrast(val) {
        for (var j = 0; j < val.cids.length; j++) {
          if (val.cids[j].indexOf('plc') !== -1) {
            this.plcNumber = val.cids[j]
          }
        }
        window.localStorage.setItem('num', val.pid) // 站点编号
        window.localStorage.setItem('Cid', val.crane_id) // 设备编号
        window.localStorage.setItem('name', val.name_label) // 设备名称
        window.localStorage.setItem('plc', this.plcNumber) // 网关
        window.localStorage.setItem('proname', val.project_name) // 项目名称
        window.localStorage.setItem('status', val.status) // 设备状态
        window.localStorage.setItem('type', val.type) // 设备类型
        this.$router.push({
          path: '/equipManagement/components/equipcontrast',
          query: {
            pid: val.pid
          }
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .ComprehensiveInfo {
    /deep/ .el-cascader__label {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      padding: 4px 25px 0 15px;
      color: #606266;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      text-align: left;
      font-size: inherit;
    }
  .homeNav{
    width: 100%;
    height: 50px;
    background-color: #25B6C7;
  }
  .ComprehensiveContent{
    width: 98%;
    height: 45vw;
    margin: 20px 20px;


    /deep/ .gutter{
      background-color: #D8DEE8;
    }
    .Cheader{
      width: 100%;
      height: 38px;
      .title{
        border-left: 5px solid #25B6C7;
      }
    }
    .headerList{
      width: 100%;
      height: 340px;
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #fff;

      }
      .bg-purple {
        background: #fff;
      }
      .bg-purple-light {
        background: #fff;
      }
      .grid-content {
        height: 320px;
        border: 1px solid #E6E6E6;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
      .leftTop{
        width: 100%;
        height: 49px;
        border-bottom: 1px solid #E6E6E6;
        .leftinfo{
          font-size:16px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(50,56,66,1);
          float: left;
          padding-left: 20px;
          line-height: 43px;
        }
        .leftMore{
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(37,183,200,1);
          line-height:40px;
          float: right;
          padding-right: 20px;
          line-height: 43px;
          cursor: pointer;
        }

      }
      .leftContent{
        .leftNumber{
          font-size:32px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(252,131,88,1);
          text-align: center;
          height: 18px;
        }
        .leftbtn{
          width: 140px;
          height: 40px;
          margin: 0 auto;
          background-color: #F0F2F7;
          border-radius: 30px;
          font-size:16px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(105,114,126,1);
          text-align: center;
          line-height: 40px;
        }
        .leftlist{
          width: 100%;
          height: 80px;
          padding: 0 20px 0 20px;
          .TotalLifting {
            width: 120px;
            height: 90px;
            margin-top: 23px;
            float: left;
            .totalNum{
              font-size:20px;
              font-family:MicrosoftYaHei-Bold;
              font-weight:bold;
              color:rgba(37,183,200,1);
              text-align: center;
              margin-top: 10px;
            }
            .totalBtn{
              width: 135px;
              height: 40px;
              margin: -14px -1px;
              background-color: #F0F2F7;
              border-radius: 30px;
              font-size:14px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              color:rgba(105,114,126,1);
              text-align: center;
              line-height: 40px;
            }
          }
          /*
          .TotalLifting{
            width: 120px;
            height: 90px;
            margin-left: 20px;
            margin-top: 23px;
            float: left;
            .totalNum{
              font-size:20px;
              font-family:MicrosoftYaHei-Bold;
              font-weight:bold;
              color:rgba(37,183,200,1);
              text-align: center;
              margin-top: 10px;
            }
            .totalBtn{
              width: 135px;
              height: 40px;
              margin: -14px -1px;
              background-color: #F0F2F7;
              border-radius: 30px;
              font-size:14px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              color:rgba(105,114,126,1);
              text-align: center;
              line-height: 40px;
            }
          }
          .TotalMidLifting{
            width: 135px;
            height: 90px;
            margin-left: 18px;
            margin-top: 23px;
            float: left;
            .totalNum{
              font-size:20px;
              font-family:MicrosoftYaHei-Bold;
              font-weight:bold;
              color:rgba(37,183,200,1);
              text-align: center;
              margin-top: 10px;
            }
            .totalBtn{
              width: 135px;
              height: 40px;
              margin: -14px -1px;
              background-color: #F0F2F7;
              border-radius: 30px;
              font-size:14px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              color:rgba(105,114,126,1);
              text-align: center;
              line-height: 40px;
            }
          }
          .TotalEndLifting{
            width: 135px;
            height: 90px;
            margin-right: 20px;
            margin-top: 23px;
            float: right;
            .totalNum{
              font-size:20px;
              font-family:MicrosoftYaHei-Bold;
              font-weight:bold;
              color:rgba(37,183,200,1);
              text-align: center;
              margin-top: 10px;
            }
            .totalBtn{
              width: 135px;
              height: 40px;
              margin: -14px -1px;
              background-color: #F0F2F7;
              border-radius: 30px;
              font-size:14px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              color:rgba(105,114,126,1);
              text-align: center;
              line-height: 40px;
            }
          }
          */
        }
        /*
        @media screen and (min-width: 1366px) {
          .leftlist{
            .TotalLifting{
              width: 100px;
              height: 90px;
              margin-left: 20px;
              margin-top: 23px;
              float: left;
              .totalNum{
                font-size:20px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 100px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
            .TotalMidLifting{
              width: 100px;
              height: 90px;
              margin-left: 18px;
              margin-top: 23px;
              float: left;
              .totalNum{
                font-size:20px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 100px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
            .TotalEndLifting{
              width: 100px;
              height: 90px;
              margin-right: 20px;
              margin-top: 23px;
              float: right;
              .totalNum{
                font-size:20px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 100px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
          }
        }
        @media screen and (min-width: 1440px) {
          .leftlist{
            .TotalLifting{
              width: 100px;
              height: 90px;
              margin-left: 30px;
              margin-top: 23px;
              float: left;
              .totalNum{
                font-size:20px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 100px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
            .TotalMidLifting{
              width: 100px;
              height: 90px;
              margin-left: 18px;
              margin-top: 23px;
              float: left;
              .totalNum{
                font-size:20px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 100px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
            .TotalEndLifting{
              width: 100px;
              height: 90px;
              margin-right: 30px;
              margin-top: 23px;
              float: right;
              .totalNum{
                font-size:20px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 100px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
          }
        }
        @media screen and (min-width: 1920px) {
          .leftlist{
            .TotalLifting{
              width: 122px;
              height: 90px;
              margin-left: 15px;
              margin-top: 23px;
              float: left;
              .totalNum{
                font-size:24px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 130px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:16px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
            .TotalMidLifting{
              width: 130px;
              height: 90px;
              margin-left: 30px;
              margin-top: 23px;
              float: left;
              .totalNum{
                font-size:24px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 130px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:16px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
            .TotalEndLifting{
              width: 122px;
              height: 90px;
              margin-right: 30px;
              margin-top: 23px;
              float: right;
              .totalNum{
                font-size:24px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(37,183,200,1);
                text-align: center;
                margin-top: 10px;
              }
              .totalBtn{
                width: 130px;
                height: 40px;
                margin: -14px -1px;
                background-color: #F0F2F7;
                border-radius: 30px;
                font-size:16px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(105,114,126,1);
                text-align: center;
                line-height: 40px;
              }
            }
          }
        }
*/
      }
      .middleTop{
        width: 100%;
        height: 49px;
        border-bottom: 1px solid #E6E6E6;
        .middleinfo{
          font-size:16px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(50,56,66,1);
          float: left;
          padding-left: 20px;
          line-height: 43px;
        }
        .middleMore{
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(37,183,200,1);
          line-height:40px;
          float: right;
          padding-right: 20px;
          line-height: 43px;
          cursor: pointer;
        }
      }
      .middleContent{
        padding: 0 25px 0 25px;
        .middleList{
          width: 100%;
          height: 200px;
          margin-top: 30px;
          text-align: center;
          float: left;
          .middleListNumber{
            font-size:32px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color:rgba(252,131,88,1);
          }
          .middleListBtn{
            width: 100%;
            height: 40px;
            border-radius: 30px;
            font-size:16px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(105,114,126,1);
            background-color: #F0F2F7;
            line-height: 40px;
          }

        }
      }
      .rightTop{
        width: 100%;
        height: 40px;
        border: 1px solid rgba(37,183,200,1);
        .rightinfo{
          font-size:24px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(37,183,200,1);
          float: left;
          padding-left: 20px;
          line-height: 38px;
        }
        .rightMore{
          font-size:20px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(37,183,200,1);
          line-height:38px;
          float: right;
          padding-right: 20px;
          cursor: pointer;
        }
      }
      .rightMiddle{
        width: 100%;
        height: 260px;
        border: 1px solid #E6E6E6;
        margin-top: 20px;
        .rightMiddleTop{
          width: 100%;
          height: 49px;
          border-bottom: 1px solid #E6E6E6;
          .rightMiddleTitle{
            font-size:16px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color:rgba(50,56,66,1);
            float: left;
            padding-left: 20px;
            line-height: 45px;
          }
          .rightMiddleMore{
            font-size:14px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(37,183,200,1);
            line-height:45px;
            float: right;
            padding-right: 20px;
            cursor: pointer;
          }
        }
        .rightMiddleContent{
         /deep/ .el-tabs__nav {
            white-space: nowrap;
            position: relative;
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            float: left;
            z-index: 2;
            margin-left: 20px;
          }
        }
      }
    }
    /*@media screen and (min-width: 1366px){*/
     /*.headerList {*/
        /*width: 100%;*/
        /*height: 340px;*/
      /*}*/
    /*}*/
    .centerList{
      width: 100%;
      height: 500px;
      .leftTable{
        width: 100%;
        height: 500px;
        border: 1px solid #E6E6E6;
        .leftTop{
          width: 100%;
          height: 49px;
          border-bottom: 1px solid #E6E6E6;
          .leftinfo{
            font-size:16px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color:rgba(50,56,66,1);
            float: left;
            padding-left: 20px;
            line-height: 43px;
          }
          .leftMore{
            font-size:14px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(37,183,200,1);
            line-height:40px;
            float: right;
            padding-right: 20px;
            line-height: 43px;
            cursor: pointer;
          }

        }
      /deep/  .leftCenterContent .el-tabs__nav {
          white-space: nowrap;
          position: relative;
          -webkit-transition: -webkit-transform .3s;
          transition: -webkit-transform .3s;
          transition: transform .3s;
          transition: transform .3s, -webkit-transform .3s;
          float: left;
          z-index: 2;
          margin-left: 20px;
        }
      }
      .rightMap{
        width: 100%;
        height: 500px;
        border: 1px solid #E6E6E6;
        .rightMapTitle{
          width: 100%;
          height: 50px;
          border-bottom: 1px solid #E6E6E6;
          line-height: 45px;

        }
        .rightMapTitle1{
          width: 69.6%;
          height: 50px;
          border-bottom: 1px solid #E6E6E6;
          line-height: 10px;
          opacity: .8;
          z-index: 2;
          background-color: #d3dce6;
          position: absolute;
          /*border: 1px solid red;*/
          /*/deep/ .handItem {*/
            /*margin-bottom: 5px!important;*/
          /*}*/
        }

        .bMap{
          width: 100%;
          height: 400px;
          margin: 0 auto;

          .showStatus{
            width: 335px;
            height: 0;
            z-index: 1;
            position: relative;
            float: right;
            .hoverImg{
              width: 16px;
              height: 20.6vw;
              position: absolute;
              z-index: 10;
              line-height:23.6vw ;
              cursor: pointer;
              float: left;
            }
            .mapRightList{
              width: 318px;
              height: 23.35vw;
              border-left: 1px solid #E6E6E6;
              background-color: #F9FBFE;
              overflow: auto;
              display: block;
              float: right;
              .YuserName{
                width: 100%;
                height: 60px;
                border-bottom: 1px solid #E6E6E6;
                padding-left: 20px;
                .name{
                  font-size:16px;
                  font-family:MicrosoftYaHei-Bold;
                  font-weight:bold;
                  color:rgba(50,56,66,1);
                }
                .name1{
                  font-size:12px;
                  font-family:MicrosoftYaHei;
                  font-weight:400;
                  color:rgba(50,56,66,1);
                }
              }
              .YuserList{
                width: 100%;
                height: 70px;
                border-bottom: 1px solid #E6E6E6;
                padding-left: 10px;
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(50,56,66,1);
                line-height: 20px;
                .listColor{
                  font-size:12px;
                  font-family:MicrosoftYaHei;
                  font-weight:400;
                  color:rgba(37,183,200,1);
                  line-height:20px;
                  cursor: pointer;
                }
              }
            }
          }

        }
        /deep/ .el-form-item__label {
          text-align: right;
          vertical-align: middle;
          float: left;
          font-size: 14px;
          color: #606266;
          line-height: 53px;
          padding: 0 12px 0 0;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        /deep/ .el-input {
          position: relative;
          font-size: 14px;
          display: inline-block;
          width: 100%;
          margin-top: 5px;
        }
        /deep/ .el-input__inner {
          height: 30px;
          line-height: 30px;
        }
        /deep/ .el-button--primary {
          height: 30px;
          font-size: 14px;
          padding: 6px 16px;
          background: #25B6C7;
          border-color: #25B6C7;
          margin-top: 10px;
        }

      }
    }
  }

  }
</style>
